<template>
<div class="index-wrapper">
  <div class="index-title">
    <h1>目的地指数</h1>
    <span>覆盖全球75万家酒店，你想住的，我们都有</span>
  </div>
  <div class="destinations">
    <div class="destinations-title">
      <h1><i class="fa fa-align-justify" aria-hidden="true"></i>  国内</h1>
      <el-radio-group class="type-list" v-model="radioInternal" size="small">
        <el-radio-button 
          v-for="(type, index) in internalTypes"
          :key="index"
          :label="type">
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="destination-gallery">
      <el-row :gutter="10">
        <el-col 
          v-for="(img, index) in internalImgs"
          :key="index"
          :span="6">
          <div class="gallery-grid">
            <div class="img-box">
              <h1 class="img-name">{{img.name}}</h1>
              <img :src="img.url">
            </div>
            <div class="description">{{img.des}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="destinations">
    <div class="destinations-title">
      <h1><i class="fa fa-binoculars" aria-hidden="true"></i> 海外</h1>
      <el-radio-group class="type-list" v-model="radioForeign" size="small">
        <el-radio-button 
          v-for="(type, index) in foreginTypes"
          :key="index"
          :label="type">
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="destination-gallery">
      <el-row :gutter="10">
        <el-col 
          v-for="(img, index) in foreginImgs"
          :key="index"
          :span="6">
          <div class="gallery-grid">
            <div class="img-box">
              <h1 class="img-name">{{img.name}}</h1>
              <img :src="img.url">
            </div>
            <div class="description">{{img.des}}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: "DestinationIndex",
  props: {
    internalTypes: Array,
    internalImgs: Array,
    foreginTypes: Array,
    foreginImgs: Array
  },
  data() {
    return {
      radioInternal: "",
      radioForeign: ""
    };
  },
  watch: {
    internalTypes() {
      this.radioInternal = this.internalTypes[0];
    },
    foreginTypes() {
      this.radioForeign = this.foreginTypes[0];
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/varibles.scss";
.index-wrapper {
  padding: 2em 0;
  .index-title {
    padding: 0.8em 0;
    border-bottom: 2px solid $redColor;
    h1 {
      margin-right: 0.5em;
      display: inline-block;
      font-size: 1.5rem;
      color: $redColor;
    }
    span {
      font-size: 0.9rem;
      color: #999;
    }
  }
  .destinations {
    padding: 0.8em 0;
    .destinations-title {
      padding: 0.8em 0;
      font-size: 1.2rem;
      color: #666;
      h1 {
        margin-right: 1.2em;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .gallery-grid {
      position: relative;
      height: 13em;
      overflow: hidden;
      cursor: pointer;
      .img-box {
        position: absolute;
        left: 0;
        bottom: 0;
        .img-name {
          position: absolute;
          left: 0.5em;
          bottom: 1.6em;
          font-size: 1.5rem;
          color: #fff;
        }
        img {
          display: block;
          width: 100%;
        }
      }
      .description {
        position: absolute;
        left: 0;
        bottom: 0;
        padding-left: 0.5em;
        width: 100%;
        height: 2.2em;
        line-height: 2.2em;
        background-color: #f7f7f7;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        font-size: 0.9rem;
        color: #666;
      }
      &:hover {
        .description {
          border-bottom: 2px solid $redColor;
        }
        .img-box {
          border-bottom: 2px solid $redColor;
        }
      }
    }
  }
}
</style>
